import React, { Component } from "react";
// ant
import { Modal, message } from "antd";
// API
import http from '../../../utils/request';
// 组件
import FormCom from "@c/form/Index";


class NotifygroupModal extends Component {
    constructor(props){
        super(props);
        this.state = {
            isModalVisible: false,
            notify_group_id: "",
            formConfig: {
                url: "",
                editKey: "",
                initValue: {
                    id: ""
                },
                setFieldValue: {},
                formatFormKey: "id"
            },
            formLayout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 18 }
            },
            formItem: [
                { 
                    type: "Input",
                    label: "群名称", 
                    name: "group_title", 
                    required: true, 
                    placeholder:"请输入群名称"
                },
                { 
                    type: "Input",
                    label: "机器人Token", 
                    name: "robot_token", 
                    required: true, 
                    placeholder:"请输入机器人Token"
                },
                { 
                    type: "Input",
                    label: "department", 
                    name: "department", 
                    required: true, 
                    placeholder:"请输入部门"
                },
                { 
                    type: "inputTextArea",
                    label: "备注", 
                    name: "remark", 
                    maxlength: 1000,
                    required: false, 
                    style: { width: '100%' }
                },
            ]
        };
    }

    componentDidMount(){
        this.props.onRef(this);
    }

    onFormRef = (ref) => {
        this.child = ref;
    }

    // 关闭弹窗
    handleCancel = () => {
        // 清单表单
        this.child.onReset();
        this.setState({
            isModalVisible: false,  // 关闭弹窗
            formConfig: { setFieldValue: "" },  // 清除form的初始数据
        })
    }
    
    /** 弹窗 */
    visibleModal = (params) => {
        console.log(params)
        this.setState({
            isModalVisible: params.status,
            notify_group_id: params.notify_group_id
        }, () => {
            this.getDetailed();
        })
    }

    /** slb详情 */
    getDetailed = () => {
        if(!this.state.notify_group_id) { return false; }
        http.get('/notify/group', 
                {params: {id: this.state.notify_group_id}}).then(response => {
            const data = response.data.data.items[0];
            console.log(data)
            this.setState({
                formConfig: {
                    setFieldValue: data
                }
            })
        })
    }

    onBlurEvent = (e) => {
        const value = e.currentTarget.value;
        if(value) {
            this.updateItem(value ? false : true);
            return false;
        }
    }
    // 提交按钮
    submit = (value) => {
        this.state.notify_group_id ? this.handlerFormEdit(value) : this.handlerFormAdd(value);
    }
    // 添加 提交表单
    handlerFormAdd= (value) => {
        const requestData = value;
        console.log(requestData)
        http.post('/notify/group', 
                  requestData).then(response => {
            const responseData = response.data;
            // 提示
            message.info(responseData.msg);
            // 关闭弹准备
            this.handleCancel(false);
        })
    }
    // 编辑 提交表单
    handlerFormEdit= (value) => {
        console.log(value)
        const requestData = value;
        const id = this.state.notify_group_id;
        http.put(`/notify/group/${id}`, 
                 requestData).then(response => {
            const responseData = response.data;
            // 提示
            message.info(responseData.msg);
            // 关闭弹准备
            this.handleCancel(false);
        })
    }

    render(){
        return (
            <Modal title="Appkey详情" visible={this.state.isModalVisible} footer={null} onCancel={this.handleCancel}>
                <FormCom onRef={this.onFormRef} onBlur={this.onBlurEvent} formItem={this.state.formItem} formLayout={this.state.formLayout} formConfig={this.state.formConfig} submit={this.submit}>
                </FormCom>
            </Modal>
        )
    }
}

export default NotifygroupModal;
